<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POS-文本词性标注演示程序</title>
	<!-- 引入样式 -->
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css"> -->
	<link rel="stylesheet" href="./element/index.css">
	
    <style>
        html, body{
            margin: 0;
            padding: 0;
        }

		.header{
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 1px solid #D7DAE2;
			margin: 24px 0;
		}

        header{
            font-size: 24px;
            font-weight: 1000;
			padding: 16px;
			color: #409EFF;
        }
		
		.header-right{
			flex-grow: 1;
			text-align: right;
			font-size: 14px;
			color: #999999;
			padding: 0 16px;
		}

        .content{
            width: 1140px;
            margin: auto;
        }
		
		.text{
			padding: 16px;
			background: #C6E2FF;
			border-radius: 4px;
			font-size: 18px;
			line-height: 1.5;
			color: #606266;
		}
		
		.tasks{
			padding: 12px 0;
		}
		
		.results{
			padding: 16px;
			text-align: center;
			flex: content;
			min-height: 100px;
		}

		.results .word{
			padding: 4px;
			background: pink;
			color: white;
			display: inline-block;
			margin-right: 8px;
			margin-top: 8px;
			cursor: pointer;
		}

		.results .tip{

		}

		.examples .item{
			margin-bottom: 4px;
			cursor: pointer;
		}

		.tasks .input{
			width: 768px;
		}

		.footer{
			text-align: center;
			color: #999999;
			padding: 16px;
			font-size: 14px;
		}

		

    </style>
</head>
<body>
    <div id="app">
        <div class="content">
			<div class="header">
				<header class="">
					<span class="el-icon-moon-night"></span>
					<span>文本词性标注演示程序</span>
				</header>
				<div class="header-right">
					 V1.0 版权所有
				</div>
			</div>
            <div class="text">tip: 选择一个模型，然后点击 按钮！</div>
            <div class="tasks">
				
				<el-form :inline="true" :model="formInline">
					<el-form-item>
						<el-input class="input" v-model="input" placeholder="例如：嘉然今天吃什么？"></el-input>
					  </el-form-item>
					  
					<el-form-item>
						<el-select v-model="value" placeholder="请选择">
							<el-option
							  v-for="(item, index) in options"
							  :key="index"
							  :label="item"
							  :value="item">
							</el-option>
						  </el-select>
					</el-form-item>
					<el-form-item>
						<el-button @click="calulate" v-loading.fullscreen.lock="fullscreenLoading">加点魔法</el-button>
					</el-form-item>
				  </el-form>
            </div>
            <div class="results">
				<div class="tip" v-if="pos && pos.length === 0">
					<p>什么也没有~ </p>
				</div>
				<div class="word" v-for="(item) in pos" :title="getTip(item)">
					{{item[0]}}
				</div>
            </div>
			<div class="examples">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					  <span>快速选择</span>
					  <el-button style="float: right; padding: 3px 0" type="text" @click="clear">一键清空</el-button>
					</div>
					<div v-for="example, index in examples" :key="index" class="text item">
					  <div  @click="(input = example), (pos = []) ">{{example }}</div>
					</div>
				  </el-card>
			</div>
			<div class="footer">
				Copyright &copy; 2021-2022 Researcher Tech. Group 
			</div>
        </div>
    </div>
	<!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
	<!-- <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script> -->
	<script src="./element/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
			data(){
				return {
					input: "",       // 文本框的内容
					formInline: {},  // 略
					options: [],     // 模型选项
					value: '',       // 模型默认选项
					pos: [],          // 标注结果
					examples: [
						"青年一代有理想、有本领、有担当，国家就有前途，民族就有希望",
						"要以国家富强、人民幸福为己任，胸怀理想、志存高远，投身中国特色社会主义伟大实践，并为之终生奋斗。心中有阳光，脚下有力量，为了理想能坚持、不懈怠，才能创造无愧于时代的人生。",
						"有信念、有梦想、有奋斗、有奉献的人生，才是有意义的人生。当代青年建功立业的舞台空前广阔、梦想成真的前景空前光明，希望大家努力在实现中国梦的伟大实践中创造自己的精彩人生。",
						"历史和现实都告诉我们，青年一代有理想、有担当，国家就有前途，民族就有希望，实现中华民族伟大复兴就有源源不断的强大力量。",
						"当代青年必须牢固树立中国特色社会主义共同理想，为实现中华民族伟大复兴的中国梦不懈奋斗。“志当存高远”。一个人的理想志愿只有同国家的前途、民族的命运相结合才有价值，一个人的信念追求只有同社会的需要和人民的利益相一致才有意义。 历史和现实都告诉我们，青年一代有理想、有担当，国家就有前途，民族就有希望，实现我们的发展目标就有源源不断的强大力量。",
						"“得其大者可以兼其小。”只有把人生理想融入国家和民族的事业中，才能最终成就一番事业。希望你们珍惜韶华、奋发有为，勇做走在时代前面的奋进者、开拓者、奉献者，努力使自己成为祖国建设的有用之才、栋梁之材，为实现中国梦奉献智慧和力量。",
						"“人才有高下，知物由学。”梦想从学习开始，事业靠本领成就。广大青年要自觉加强学习，不断增强本领。广大青年要如饥似渴、孜孜不倦学习，既多读有字之书，也多读无字之书，注重学习人生经验和社会知识。",
						"青年人正处于学习的黄金时期，应该把学习作为首要任务，作为一种责任、一种精神追求、一种生活方式，树立梦想从学习开始、事业靠本领成就的观念，让勤奋学习成为青春远航的动力，让增长本领成为青春搏击的能量。"
					],
					fullscreenLoading: false //全局遮罩
				};
			},
			created(){
				axios.get('/baselines')
					.then((response) => {
					if(response.data.status){
						this.options = response.data.data;
						this.value = (this.options[0]) ? this.options[0] : '';
					}else{
						this.$message.error(response.data.msg);
					}
					})
					.catch((error) => {
					console.log(error);
					});

			},
			methods: {
				/**
				 * 获取提示
				 * @item {object} - item 一个数组，第一个元素是一个词
				 * @return {string} 提示信息
				 */
				getTip(item){
					r = ""
				　　if(item[1]){
						r += item[1]
					}
					if(item[2]){
						r += "," + item[2]
					}
					return r;
				},
				/**
				 * 访问服务器，获取词性标注结果
				 * */
				calulate(){
					this.fullscreenLoading = true
                    axios.post(`/model/${this.value}`, {text: this.input})
					  .then((response) => {
						this.fullscreenLoading = false;
					  	if(response.data.status){
					  	    this.pos = (response.data.data);
					  	}else{
					  		this.$message.error(response.data.msg);
					  	}
					  })
					  .catch((error) => {
						console.log(error);
					  });
				},
				/* 清除结果 */
				clear(){
					this.pos = []
					this.input = []
				}
			}
        });

        //console.log(app);

    </script>
</body>
</html>